<template>
  <div class="exam-create">
    <el-card>
      <template #header>
        <span>创建考试</span>
      </template>
      
      <el-form :model="examForm" :rules="rules" ref="formRef" label-width="120px">
        <el-form-item label="考试标题" prop="title">
          <el-input v-model="examForm.title" placeholder="请输入考试标题" />
        </el-form-item>
        
        <el-form-item label="学科" prop="subjectId">
          <el-select v-model="examForm.subjectId" placeholder="请选择学科">
            <el-option label="数学" value="1" />
            <el-option label="语文" value="2" />
            <el-option label="英语" value="3" />
          </el-select>
        </el-form-item>
        
        <el-form-item label="考试时长" prop="duration">
          <el-input-number v-model="examForm.duration" :min="1" :max="300" />
          <span style="margin-left: 10px;">分钟</span>
        </el-form-item>
        
        <el-form-item label="开始时间" prop="startTime">
          <el-date-picker
            v-model="examForm.startTime"
            type="datetime"
            placeholder="选择开始时间"
          />
        </el-form-item>
        
        <el-form-item label="结束时间" prop="endTime">
          <el-date-picker
            v-model="examForm.endTime"
            type="datetime"
            placeholder="选择结束时间"
          />
        </el-form-item>
        
        <el-form-item label="考试说明" prop="description">
          <el-input
            v-model="examForm.description"
            type="textarea"
            :rows="4"
            placeholder="请输入考试说明"
          />
        </el-form-item>
        
        <el-form-item>
          <el-button type="primary" @click="handleSubmit">创建考试</el-button>
          <el-button @click="handleReset">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import type { FormInstance, FormRules } from 'element-plus'

const formRef = ref<FormInstance>()

const examForm = reactive({
  title: '',
  subjectId: '',
  duration: 60,
  startTime: '',
  endTime: '',
  description: ''
})

const rules: FormRules = {
  title: [
    { required: true, message: '请输入考试标题', trigger: 'blur' }
  ],
  subjectId: [
    { required: true, message: '请选择学科', trigger: 'change' }
  ],
  duration: [
    { required: true, message: '请输入考试时长', trigger: 'blur' }
  ],
  startTime: [
    { required: true, message: '请选择开始时间', trigger: 'change' }
  ],
  endTime: [
    { required: true, message: '请选择结束时间', trigger: 'change' }
  ]
}

const handleSubmit = () => {
  formRef.value?.validate((valid) => {
    if (valid) {
      console.log('创建考试', examForm)
    }
  })
}

const handleReset = () => {
  formRef.value?.resetFields()
}
</script>
